<template>
  <div class="pageListWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">数据来源:</span>
                <span class="searchInputFont">
                    <el-select v-model="searchInfo.dataSource" @change="searchRowsInfo(true)" size="mini" clearable
                               placeholder="数据来源">
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业名称:</span>
                <span class="searchInputFont">
                   <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo(true)" clearable placeholder="全部">
                    <el-option
                      v-for="item in this.$store.state.companyInfos"
                      :key="item.enterpriseNo+''"
                      :label="item.enterpriseName"
                      :value="item.enterpriseNo+''">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">用户编号:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.userNo" @change="searchRowsInfo(true)"
                              auto-complete="off" placeholder="用户编号"></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">用户状态:</span>
                <span class="searchInputFont">
                    <el-select v-model="searchInfo.userStatus" @change="searchRowsInfo(true)" size="mini" clearable
                               placeholder="用户状态">
                       <el-option
                         v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">更新时间:</span>
                <span class="searchInputFont">
                     <el-date-picker
                       style="width: 100%;"
                       v-model="value6"
                       type="daterange"
                       align="left"
                       @change="searchRowsInfo(true)"
                       placeholder="选择日期范围"
                       size="mini"
                       :picker-options="$store.state.pickerOptions2">
                      </el-date-picker>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" style="top:123px;">
        <div class="tableInner" ref="tableInnerWrap" >
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            style="width: 100%"
          >
            <el-table-column
              prop="userName"
              label="姓名"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="userNo"
              label="用户编号"
            >

            </el-table-column>
            <el-table-column
              prop="dataSource"
              label="信息来源"
            >
              <template slot-scope="scope">
                {{scope.row.dataSource==0?"政府":scope.row.dataSource==1?"企业":""}}
              </template>
            </el-table-column>
            <el-table-column
              label="单位名称"
              prop="enterpriseName"
            >
            </el-table-column>
            <el-table-column
              prop="userStatus"
              label="用户状态"
            >
              <template slot-scope="scope">
                {{scope.row.userStatus==1?"黑名单":scope.row.userStatus==2?"禁骑":""}}
              </template>
            </el-table-column>
            <el-table-column
              prop="reportTime"
              label="数据更新时间"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchInfo.page"
            :page-sizes="[10, 30, 50, 100,200]"
            :page-size="searchInfo.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import uploadDialog from "./uploadDialog.vue"
  export default {
    props: [],
    data(){
      return {
        rows: [],
        count: 0,
        options: [
          {
            value: '0',
            label: '政府'
          }, {
            value: '1',
            label: '企业'
          }],
        options1: [
          {
            value: '1',
            label: '黑名单'
          }, {
            value: '2',
            label: '禁骑'
          }],
        //以下为搜索
        value6: "",
        tableHeight: "200",
        searchInfo: {
          "page":1,
          "rows":10,
          "userStatus": "",
          "dataSource": "",
          "userNo": "",
          "enterpriseNo": "",
          "userName": "",
          "beginTime": "",
          "endTime": ""

        },
      }
    },
    components: {uploadDialog},
    created(){
      this.searchRowsInfo()

    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".pageListWrap").clientHeight - 200
      })
    },
    methods: {

      searchRowsInfo(val){
        val ? "" : this.searchInfo.page = 1
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginTime = ""
          this.searchInfo.endTime = ""
        }
        this.axios.post(process.env.API_HOST + `/credit/selectCreditUserGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.rows = result.rows
              this.count = result.total
            }
          })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo(val)
      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .pageListWrap
    page()

</style>
